<template>
	<view class="application">
		<view class="application_top">
			<view class="application_top_  text">
				<h4>提现数量</h4>
				<view class="textposition" @click="tixian_jilu">
					提货记录
				</view>
			</view>
			<view class="application_top_  input">
				<h4>￥</h4>
				<input class="input_in" type="number" placeholder="请输入提现金额" v-model="money" />
			</view>
			<view class="application_top_  ktxsl">
				<h4>可提现数量：</h4>
				<h4 style="color: #333;">￥{{res.credit}}</h4>
				<text style="font-size: 20rpx;">当前提现手续费为{{res.scfw}}</text>
			</view>
		</view>
		<view class="application_bottom">
			<!-- <view class="application_bottom_position">
				提现到银行卡
			</view> -->
			<u-subsection :list="list" :current="applytype" @change="subsectionChange"></u-subsection>
			<view class="application_bottom_form">
				<view class="example" v-show="applytype === 0">
					<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-position='top'>
						<uni-forms-item label="姓名" required name="realname">
							<uni-easyinput v-model="valiFormData.realname" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="联系电话" required name="mobile">
							<uni-easyinput v-model="valiFormData.mobile" placeholder="请输入联系电话" />
						</uni-forms-item>
						<uni-forms-item label="选择银行" required name="bankname">
							<uni-data-select :localdata="res.banklist" :value="valiFormData.bankname"
								:placeholder="valiFormData.bankname?valiFormData.bankname:'请选择开户银行'" @change="change"
								clear></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="开户支行" required name="bankbranch">
							<uni-easyinput v-model="valiFormData.bankbranch" placeholder="请输入开户支行" />
						</uni-forms-item>
						<uni-forms-item label="银行卡号" required name="bankcard">
							<uni-easyinput v-model="valiFormData.bankcard" placeholder="请输入银行卡号" />
						</uni-forms-item>
						<uni-forms-item label="确认卡号" required name="bankcard1">
							<uni-easyinput v-model="valiFormData.bankcard1" placeholder="请输入确认卡号" />
						</uni-forms-item>
					</uni-forms>
					<button type="primary" @click="submit('valiForm')">提交</button>
				</view>


				<view v-show="applytype !== 0">
					<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData" label-position='top'>
						<uni-forms-item :label-width='170' label="姓名" required name="realname">
							<uni-easyinput v-model="customFormData.realname" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item :label-width='170' :label="applytype === 1?'微信账号':applytype === 2?'支付宝账号':'账号'"
							required name="alipay">
							<uni-easyinput v-model="customFormData.alipay" placeholder="请输入提现账号" />
						</uni-forms-item>
						<uni-forms-item :label-width='170'
							:label="applytype === 1?'确认微信账号':applytype === 2?'确认支付宝账号':'确认账号'" required name="alipay1">
							<uni-easyinput v-model="customFormData.alipay1" placeholder="确认账号" />
						</uni-forms-item>
					</uni-forms>
					<button type="primary" @click="submit('customForm')">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		member_withdraw,
		api_index_my_tx_info,
		member_withdraw_submit
	} from '@/api/member.js'
	export default {
		data() {
			return {
				list: ['银行卡提现', '微信提现', '支付宝提现'],
				valiFormData: {
					realname: '',
					bankcard: '',
					bankcard1: '',
					bankname: '',
					bankbranch: '',
					mobile: '',
				},
				money: '',
				applytype: 0,
				rules: {
					realname: {
						rules: [{
							required: true,
							errorMessage: '输入框不得为空'
						}]
					},
					bankcard: {
						rules: [{
							required: true,
							errorMessage: '输入框不得为空'
						}]
					},
					bankcard1: {
						rules: [{
							required: true,
							errorMessage: '输入框不得为空'
						}]
					},
					bankname: {
						rules: [{
							required: true,
							errorMessage: '输入框不得为空'
						}]
					},
					bankbranch: {
						rules: [{
							required: true,
							errorMessage: '输入框不得为空'
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: '输入框不得为空'
						}]
					},

				},



				res: '',
				openid: '',

				customFormData: {
					realname: '',
					alipay: '',
					alipay1: ''
				},

				customRules: {
					realname: {
						rules: [{
							required: true,
							errorMessage: '输入框不得为空'
						}]
					},
					alipay: {
						rules: [{
							required: true,
							errorMessage: '输入框不得为空'
						}]
					},
					alipay1: {
						rules: [{
							required: true,
							errorMessage: '输入框不得为空'
						}]
					}
				}
			};
		},
		onLoad: function(e) {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.member_withdrawFun();
					this.api_index_my_tx_infoFun(1)
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods: {
			async api_index_my_tx_infoFun(type) {
				let up = {
					openid: this.openid,
					type
				}
				let data = await api_index_my_tx_info(up);
				console.log(data.length)
				if (type === 1) {
					this.valiFormData.realname = data.realname;
					this.valiFormData.bankcard = data.bankcard;
					this.valiFormData.bankcard1 = data.bankcard;
					this.valiFormData.bankname = data.bankname;
					this.valiFormData.bankbranch = data.bankbranch;
					this.valiFormData.mobile = data.mobile;
				} else {
					this.customFormData.realname = data.realname;
					this.customFormData.alipay = data.alipay;
					this.customFormData.alipay1 = data.alipay;
				}
				console.log(data);
			},
			subsectionChange(e) {
				this.applytype = e;
				console.log(e);
				this.api_index_my_tx_infoFun(e + 1)
			},
			async member_withdraw_submitFun() {
				let up = null;
				if (this.applytype === 0) {
					up = {
						openid: this.openid,
						applytype: 3,
						realname: this.valiFormData.realname,
						bankcard: this.valiFormData.bankcard,
						bankcard1: this.valiFormData.bankcard1,
						bankname: this.valiFormData.bankname,
						money: this.money,
						bankbranch: this.valiFormData.bankbranch,
						mobile: this.valiFormData.mobile,
					}
				} else {
					up = {
						openid: this.openid,
						applytype: this.applytype,
						money: this.money,
						realname: this.customFormData.realname,
						alipay: this.customFormData.alipay,
						alipay1: this.customFormData.alipay1
					}
				}
				let data = await member_withdraw_submit(up);
				console.log(data);
				if (data.status === 1) {
					if (this.applytype === 0) {
						for (let key in this.valiFormData) {
							this.valiFormData[key] = '';
						}
					} else {
						for (let key in this.customFormData) {
							this.customFormData[key] = '';
						}
					}
					this.money = '';
					this.showinteraction('发起成功请等待审核');
					setTimeout(() => {
						this.member_withdrawFun();
					}, 1000)
				}
			},
			change(e) {
				console.log(e);
				this.valiFormData.bankname = this.res.banklist[e - 1].text;
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					this.member_withdraw_submitFun();
				}).catch(err => {
					console.log('err', err);
				})
			},
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			async member_withdrawFun() {
				let data = await member_withdraw({
					openid: this.openid
				});
				this.res = data;
			},
			onCancel(e) {},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			check() {
				this.boolean = this.boolean == 'block' ? 'none' : 'block';
			},
			tixian_jilu() {
				uni.navigateTo({
					url: '/pages/member/withdraw/WithdrawalDetails/WithdrawalDetails'
				})
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			// jump() {
			// 	this.showinteraction('暂未开放');
			// 	return
			// 	if (this.realname == '') {
			// 		uni.showModal({
			// 			title: '请输入名字',
			// 			showCancel: false
			// 		})
			// 		return
			// 	}
			// 	if (this.bankcard == '') {
			// 		uni.showModal({
			// 			title: '请输入银行卡号',
			// 			showCancel: false
			// 		})
			// 		return
			// 	}
			// 	if (this.bankname == '请选择银行') {
			// 		uni.showModal({
			// 			title: '请选择银行',
			// 			showCancel: false
			// 		})
			// 		return
			// 	}
			// 	if (this.bankcard1 == '') {
			// 		uni.showModal({
			// 			title: '请确认卡号',
			// 			showCancel: false
			// 		})
			// 		return
			// 	}

			// 	uni.request({
			// 		url: 'http://h.gydweb.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.withdraw.submit&app=1',
			// 		method: 'POST',
			// 		data: {
			// 			'openid': this.openid,
			// 			'applytype': 3,
			// 			'realname': this.realname,
			// 			'bankcard': this.bankcard,
			// 			'bankcard1': this.bankcard1,
			// 			'bankname': this.bankname,
			// 			'money': this.money,
			// 			'bankbranch': this.bankbranch,
			// 			// 'accountarea': this.accountarea,
			// 			'tx_type': this.tx_type,
			// 			'mobile': this.mobile,

			// 		},
			// 		header: {
			// 			'Content-Type': 'application/x-www-form-urlencoded'
			// 		},
			// 		success: res => {
			// 			console.log(res)
			// 			if (res.data.status == 0) {
			// 				uni.showModal({
			// 					title: '提示',
			// 					content: res.data.result.message,
			// 					showCancel: false
			// 				})
			// 				return
			// 			}
			// 			if (res.statusCode == 200) {
			// 				uni.showModal({
			// 					content: '提现申请以完成',
			// 					showCancel: false,
			// 					confirmColor: "#DD524D",
			// 					success() {
			// 						uni.navigateTo({
			// 							url: '/pages/member/zfbPay/choose'
			// 						})
			// 					}
			// 				})
			// 			}

			// 		},
			// 		fail: () => {},
			// 		complete: () => {}
			// 	})
			// }
		}
	}
</script>

<style lang="less">
	path {

		background-color: #ccc;
	}

	.application {
		width: 100%;
		// min-height: 100vh;
		padding-top: 40rpx;

		.application_title {
			width: 100%;
			height: 100rpx;
			position: fixed;
			top: 0;
			background-color: #fff;
			line-height: 100rpx;

			.application_title_icons {
				position: absolute;
				left: 20rpx;
			}

			.application_title_text {
				width: 100%;
				text-align: center;
			}
		}

		.application_top {
			width: 94%;
			height: 300rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			background-color: #fff;
			overflow: hidden;
			box-shadow: 0 0 20rpx #ccc;

			.application_top_ {
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
			}

			.input {
				h4 {
					color: #888;
					font-size: 44rpx;
				}

				.input_in {
					height: 100rpx;
					padding: 0 20rpx;
					font-size: 44rpx;
				}
			}

			.text {
				position: relative;

				.textposition {
					position: absolute;
					border-bottom-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
					line-height: 50rpx;
					color: #fff;
					right: 2rpx;
					top: 0;
					// width: 160rpx;
					padding: 0 20rpx;
					text-align: center;
					height: 50rpx;
					background-color: #ff8507;
				}
			}

			.ktxsl {
				color: #888888;
				padding: 0 0 0 72rpx;
				justify-content: space-around;
			}
		}

		.application_bottom {
			width: 94%;
			min-height: 700rpx;
			margin: 40rpx auto;
			border-radius: 10rpx;
			background-color: #fff;
			overflow: hidden;
			position: relative;

			.application_bottom_position {
				position: absolute;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				line-height: 50rpx;
				color: #fff;
				right: 2rpx;
				top: 0;
				// width: 160rpx;
				text-align: center;
				padding: 0 20rpx;
				height: 50rpx;
				background-color: #ff8507;
			}

			.application_bottom_form {
				width: 100%;
				padding: 60rpx 20rpx;



				.application_bottom_form_input {
					height: 100rpx;
					border-bottom: 1rpx solid #f5f5f5;
					display: flex;
					align-items: center;

					.name {
						width: 160rpx;
						display: flex;
						align-items: center;
					}

					.bank {
						flex: 1;
						position: relative;

						.out_miss_father {
							position: absolute;
							padding: 10rpx 20rpx;
							width: 80%;
							height: 216rpx;
							line-height: 100rpx;
							background-color: #fff;
							z-index: 10;
							top: 70rpx;
							text-align: center;
							border-bottom-left-radius: 10rpx;
							border-bottom-right-radius: 10rpx;
							border: 1rpx solid #f5f5f5;
							border-top: none;
							overflow-y: scroll;

							.list {
								border-bottom: 1rpx solid #f5f5f5;
							}

							.list:last-child {
								border: none;
							}
						}
					}


				}

				.next {
					margin: 20upx;
					border-radius: 15upx;
					background-color: #ff8507;
					color: #fff;
				}
			}
		}



	}

	/* button::after {
		border: none;
	}

	.top {
		margin-top: 30upx;
		background-color: #fff;
		padding: 0 20upx;
	}

	.uni-form-item {
		position: relative;
	}

	.uni-input_top {
		margin-left: 50upx;
		height: 100upx;
		line-height: 100upx;
		font-size: 40upx;
		border-bottom: 1upx solid #eee;
	}

	.yuan {
		position: absolute;
		top: 100upx;
		font-size: 44upx;
		font-weight: 555;
		left: 20upx;
	}

	.top_two {
		height: 80upx;
		line-height: 80upx;
		margin-left: 20upx;
		color: #555;
	}

	.top_right {
		margin-left: 50upx;
	}

	.foot {
		background-color: #FFFFFF;
		margin-top: 30upx;
	}

	.get_way {
		margin-left: 30upx;
		border-bottom: 2upx solid #eee;
	}

	.img {
		width: 50upx;
		height: 50upx;
		margin-left: 30upx;
		margin-top: 30upx;
	}

	.getit {
		position: relative;
		height: 100upx;
		border-bottom: 2upx solid #eee;
	}

	.getit_card {
		position: absolute;
		top: 30upx;
		left: 100upx;
	}

	.radio {
		position: absolute;
		top: 30upx;
		right: 25upx;
	}

	.show {
		background-color: #fff;
	}

	.same {
		height: 80upx;
		display: flex;
		align-items: center;
		margin: 20upx;
	padding-bottom: 20upx;
	padding: 0 40rpx;
	border-bottom: 1upx solid #eee;
	}

	.name {
		width: 200rpx;
		flex: 1;
		padding-top: 16upx;
	}

	.uni-input_cell {
		flex: 3;
	}

	.bank {
		flex: 3;
		position: relative;
	}

	.bank_online {
		position: absolute;
		left: 10upx;
		top: 16upx;
	}

	.out_miss_father {
		position: absolute;
		top: 58upx;
		left: 10upx;
		z-index: 99999;
		width: 400upx;
		border: 1upx solid #ccc;
		background-color: #fff;
		text-align: center;
	}

	.next {
		margin: 20upx;
		border-radius: 15upx;
		background-color: #ff8507;
		color: #fff;
	}

	.list {
		height: 60upx;
		line-height: 60upx;
	}

	*/
</style>